

<template>
  <div class="detail">
    <div class="tablesB" v-if="dialogTitle == '详情信息'">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="库存明细" name="1">
      <el-table :data="dataKuCunDetail" border>
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>
        <template v-for="(item, index) in $baseBai['pharmacy_STOCK_detail']">
          <el-table-column
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :key="index + item"
          >
          </el-table-column>
        </template>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="申领记录" name="2">
       <div class="tablesB" >
         <el-table   v-loading="params.loading" :data="data" border>
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>
        <template v-for="(item, index) in $baseBai['pharmacy_storeDrugClaimRecord']">
          <el-table-column
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :key="index + item"
          >
          </el-table-column>
        </template>
      </el-table>
       <div>
           <el-pagination
           class="fenye"
            :background="true"
            :current-page="params.page"
            :page-size="params.limit"
            layout="prev, pager, next"
            @current-change="handlePagination"
            :total="params.pageCount">
            </el-pagination>
      </div>
    </div>
    </el-tab-pane>

  </el-tabs>  
      
    </div>
    
  </div>
</template>
<script>
let t;
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      activeName:'1',
      params:{
        page:1,
        limit:10,
        pageCount:0,
        loading:false,
      },
      data:[],
    };
  },
  props: ["dialogTitle",'that'],
  methods: {
    handleClick(tab, event){
      console.log(this.activeName);
      if(this.activeName=='2'){
        this.getStoreDrugClaimRecord()
      }
    },
      handlePagination(e){
       
         t.params.page=e;
        t.getStoreDrugClaimRecord()
        
    },
    getStoreDrugClaimRecord(){
        this.params.loading=true;
      let d={
        id:this.that.id,
        page:this.params.page,
        limit:this.params.limit,
        house_id:this.that.$route.query.house_id,
      }
      this['_API'].getStoreDrugClaimRecord(d).then(res=>{
          this.params.loading=false;
        if(res.code==200){
             this.data=res.data.list;
             this.params.pageCount=res.data.count
        }
      })
    },
  },
  computed: {
    ...mapState({
      dataKuCunDetail: (state) => state.pharmacy_MZ.dataKuCunDetail,
    
    }),
  },
};
</script>
<style lang='scss' scoped>
.addUdetailpdate {
  padding: 0 5%;
}
/deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}

  .fenye{
    text-align: right;
    margin-top: 20px;   
    
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
      background-color: #02bf6b;
  }

</style>